/** 资源复用 */
import React from 'react'
import { useCallback } from 'react'
import { useState } from 'react'

// 全局变量，记录函数内存地址
let handlerAddr = null
let handlerAddr2 = null

export default function HookCallback() {

  let [count, setCount] = useState(0)

  // 页面刷新时，如何知道handler函数被重新加载？
  // 结果：声明的普通函数，组件数据发生更新时重新在内存中创建造成资源浪费
  const handler = () => {
    console.log("handler函数")
  }
  // 判断两次声明的函数是否同一个函数
  // （第一次(组件加载)肯定false，第二次更新可以判断是否同一个函数）
  console.log(handler == handlerAddr, "普通函数-是否同一个函数")
  // 引用赋值（函数作为对象，变量中存储的是函数在内存中的地址）
  handlerAddr = handler

  // handler2函数经过useCallback优化
  // 函数组件中数据发生更新，handler2函数不会被重新创建，节省系统资源
  const handler2 = useCallback(() => {
    console.log("handler2函数")
  }, [])
  console.log(handler2 == handlerAddr2, "useCallback-声明函数")
  handlerAddr2 = handler2


  return (
    <div>
      <h3>3. useCallback的使用</h3>
      <div>
        <p>计数器：{count}</p>
        <button onClick={() => setCount(++count)}>增加数据</button>
      </div>
      <div>
        <button onClick={handler}> handler函数</button>
        <button onClick={handler2}>handler2函数</button>
      </div>
    </div>
  )
}
